<template>
    <div>
        <card shadow="hover">
            <div class="p20">
                <el-form>
                    <div class="mb10" style="color:crimson;">测试阶段，查询结果可能有异</div>

                    <el-row :gutter="10">
                        <el-col :span="3">
                            <el-form-item label="A号码:">
                                <el-input v-model="searchForm.callA" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="B号码:">
                                <el-input v-model="searchForm.callB" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="X号码:">
                                <el-input v-model="searchForm.callX" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="客户名称:">
                                <el-input v-model="searchForm.customeraccount" />
                            </el-form-item>
                        </el-col>

                        <!-- <el-col :span="6">
                        <el-form-item label="起止时间:">
                            <el-date-picker v-model="value1" type="datetimerange" range-separator="至"
                                start-placeholder="Start date" end-placeholder="End date" />
                        </el-form-item>
                    </el-col> -->
                        <!-- <el-col :span="3">
                        <el-form-item label="">
                            <el-date-picker v-model="date" type="date" placeholder="选择日期">
                            </el-date-picker>

                        </el-form-item>
                    </el-col> -->

                        <el-col :span="6">
                            <el-form-item label="选择时间">
                                <!-- <el-time-select v-model="startTime" placeholder="选择时间">
                            </el-time-select> -->
                                <!-- <el-date-picker
                                v-model="startTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="开始日期">
                            </el-date-picker> -->
                                <el-date-picker v-model="date" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="2">
                        <el-date-picker
                                v-model="endTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="结束日期">
                            </el-date-picker>
                    </el-col> -->

                    </el-row>
                    <el-row :gutter="10">
                        <!-- <el-col :span="3">
                        <el-form-item label="绑定状态:">
                            <el-input v-model="searchForm.bindConsume" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="处理耗时:">
                            <el-select v-model="searchForm.handleConsume" placeholder="请选择">
                                <el-option v-for="item in timeGroup" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                        <el-col :span="3">
                            <el-form-item label="通话时长:">
                                <el-select v-model="searchForm.holdTime" placeholder="请选择">
                                    <el-option v-for="item in timeGroup" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="primary" @click="getRecords"><el-icon>
                                    <Search />
                                </el-icon>查询</el-button>
                            <el-button type="info" @click="clearData"><el-icon>
                                    <Close />
                                </el-icon>清空</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <el-table :data="tableData" style="width: 100%;height:60vh" stripe v-loading="loading"
                    element-loading-text="加载中..." :element-loading-spinner="svg"
                    element-loading-svg-view-box="-10, -10, 50, 50">
                    <!-- <el-table-column type="index" width="80" label="序号" align="center" /> -->
                    <el-table-column prop="callA" label="A号码" width="150" :show-overflow-tooltip="true" />
                    <el-table-column prop="callB" label="B号码" width="150" :show-overflow-tooltip="true" />
                    <el-table-column prop="callBRegion" label="归属地" width="80" :show-overflow-tooltip="true" />
                    <el-table-column prop="callX" label="X号码" width="150" :show-overflow-tooltip="true" />
                    <el-table-column prop="callXRegion" label="归属地" width="80" :show-overflow-tooltip="true" />
                    <el-table-column prop="callTime" label="呼叫时间" :formatter="formatDateTime" width="200"
                        :show-overflow-tooltip="true" />
                    <el-table-column prop="holdTime" label="通话时长" width="90" />
                    <el-table-column prop="callAOperato" label="A路运营商" width="200" :show-overflow-tooltip="true" />
                    <el-table-column prop="callXOperato" label="X路运营商" width="200" :show-overflow-tooltip="true" />
                    <el-table-column prop="customeraccount" label="客户名称" width="200" :show-overflow-tooltip="true" />
                    <el-table-column prop="endReason" label="挂断原因" width="90" />
                    <el-table-column prop="callIP" label="呼入IP" :show-overflow-tooltip='true' />
                    <el-table-column prop="callVos" label="呼入VOS" />
                </el-table>
            </div>
            <div style="margin-top: 20px;">
                <el-pagination style="justify-content: center;" v-model:current-page="currentPageIndex"
                    v-model:page-size="pageSize" :page-sizes="[10, 20]" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </div>
        </card>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref, onMounted } from 'vue'
import { formatDateTime } from '@/utils/index'
import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()
import {
    Search, Close
} from '@element-plus/icons-vue'
import axios from 'axios';
onMounted(() => {
    // getRecords()
})
const searchForm = reactive({
    caller: '',
    callA: '',
    callX: '',
    callB: '',
    // startTime:'',
    // endTime:'',
    customeraccount: '',
    handleConsume: '',
    holdTime: ''
})
// const submitForm = reactive({
//     primaryCall: '',
//     outCall: '',
//     primaryCalled: '',
//     outCalled: '',
// })
// const ids = ref([])
// const dialogTitle = ref('')
// const multipleSelection = ref([])
const timeGroup = ref([
    { label: '>1s', value: 1 },
    { label: '>30s', value: 30 },
    { label: '>60ms', value: 60 },
    { label: '无限制', value: 0 },
])
const pageSize = ref(10)
const loading = ref(false)
const currentPageIndex = ref(1)
const total = ref()
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`
// const startDate = new Date()
// const endDate = new Date()
// new Date().toISOString().split('T')[0]
const date = ref([new Date(), new Date()])
const startTime = ref('');
const endTime = ref('')
// endDate.setDate(endDate.getDate() + 1)
// startDate.setMinutes(startDate.getMinutes() - 15)
// const value1 = ref([
//     startDate,
//     new Date(endDate.toLocaleDateString())
// ])
// const form = reactive({
//     gatewayID: '',
//     ip: ''

// })
const tableData = ref([])
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    currentPageIndex.value = val
    getRecords()
}
const handleSizeChange = (val: number) => {
    currentPageIndex.value = val
    getRecords()
}

const clearData = () => {
    Object.assign(searchForm, {
        caller: '',
        callA: '',
        callX: '',
        callB: '',
        // startTime:'',
        // endTime:'',
        customeraccount: '',
        handleConsume: '',
        holdTime: ''
    });
    date.value = [new Date(), new Date()]
}

const options_date = { year: 'numeric', month: '2-digit', day: '2-digit' };
const getRecords = () => {
    loading.value = true
    let data = {
        caller: searchForm.caller,
        callA: searchForm.callA,
        callX: searchForm.callX,
        callB: searchForm.callB,
        startDate: date.value[0].toLocaleDateString('zh-CN', options_date).replace(/\//g, '-'),
        endDate: date.value[1].toLocaleDateString('zh-CN', options_date).replace(/\//g, '-'),
        callvos: '',

    }
    console.log(data)
    console.log(date)
    // http://192.168.1.47:8130/search/
    // http://119.45.181.102:8130/search/
    axios.post("http://119.45.181.102:8130/search/", data, { timeout: 100000 }).then(res => {
        // console.log(res.data)
        // tableData.value.forEach((item: any,index) => {
        //     item.primaryCalled_city = res.data[index].city

        // })
        console.log(res.data)
        tableData.value = res.data
        total.value = res.data.length
        loading.value = false
    })

}
</script>
<style scoped>
.example-showcase .el-loading-mask {
    z-index: 9;
}
</style>